<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <title>Document</title>
</head>
<body>
<div>
    年份
    <select id="year_data">
        <option value="1" class="active">2021年</option>
        <option value="2">2020年</option>
        <option value="3">2019年</option>
    </select>
</div>
<div id="chart_box" style="width: 1250px;height:550px;margin:0 auto;"></div>
</body>
</body>
<script>
    $(function () {//使用on进行事件绑定事件。
        mychart1('year1');
        $("select").on('click',function(){
            if($("select").val()==1){
                mychart1('year1');
            }
            else if($("select").val()==2){
                mychart1('year2');
            }
            else if($("select").val()==3){
                mychart1('year3');
            }
        })  ;
        $("#time_sec").on('click',function(){
            myChart1.clear();  //清空原来的图表
            mychart1('time_sec');  //重新加载图表，之前必须要清空原来的，否则没有动画效果
        });
    });
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('chart_box'));

    function mychart1(time){
        if(time=='year1'){
            var renShu = [ 80, 79.10, 81.45, 47.20, 49.30, 91.20, 68.30, 75.30, 55.65, 91.20, 67.30, 89.20];
        }else if(time=='year2'){
            var renShu = [ 50.00, 90.00, 47.20, 78, 59.30, 75.00, 81.45, 61.30, 51.20, 43.00, 92.00, 69.20];
        }else if(time=='year3'){
            var renShu = [ 74.43, 47.20, 61.45, 78, 59.30, 75.30, 58.30, 91.30, 63.00, 71.20, 72.87, 55.65,];
        }
        //配置及数据
        optionyear = {
            title: {
                text : "微信用户使用率",
                padding: [10, 100, 10, 500] , // 标题位置
                subtext : ""
            },
            tooltip: {
                formatter: '{c}%',
                trigger: 'axis',
                show:true,     //是否显示提示框组件 默认为true
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:['']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min:0,
                    max:92.00,
                    splitNumber:10,
                    axisLabel: {
                        formatter: '{value}%',
                    }
                },
            ],
            series: [
                {
                    name:'',
                    type:'bar',         //bar表示柱状图
                    barWidth:20,
                    data:renShu,//数据
                    itemStyle: {    //更多柱状图样式搜索API：series-bar.itemStyle
                        normal: {
                            color: '#1E90FF',//改变柱状的颜色
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                formatter: '{c}%'  ,   //百分比显示
                                textStyle: { //数值样式
                                    color: 'black',    //柱上数据颜色
                                    fontSize: 16
                                }
                            }
                        }
                    }
                }
            ]
        };
        myChart1.setOption(optionyear);
    }
</script>
</html>

series: [
{
type: 'bar', barWidth: 10, stack: 'total', data: this.seriesData,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
// 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
offset: 0,
color: '#4d76ff'
}, {
offset: 1,
color: '#80aaff'
}]),
}
},
}
],